<template>
    <div class="phone-list">
        <van-nav-bar left-arrow @click-left="$router.back(-1)" :fixed="true" :title="modelBrand"
                     style="color:#fff;">
        </van-nav-bar>
        <div style="padding-top:46px"></div>
        <van-list
            v-model="loading"
            :finished="finished"
            :loading-text="$t('m.Loading')"
            @load="getList"
            class="main-explore phone-list-explore">
            <div class="explore-item" @click="goToDetail(item.id)" v-for="(item, index) in tableData" :key="index"
                 v-bind:class="[tableData.length % 2 == 0 ? twoClass : oneClass]">
                <div class="explore-item-icon">
                    <img v-lazy="item.cover" alt="" :key="item.cover" :onload="getWidthAndHeight(item, index)"
                         :class="[item.wth == 1 ? 'width-max' : 'height-max']"/>
                </div>
                <div class="explore-item-label">{{translateString(item.title)}}</div>
                <span>
                        <div class="explore-item-label price" v-if="item.priceType == 2">Lks&nbsp;{{regexNum(item.price)}}</div>
                        <div class="explore-item-label price" v-else>Ks&nbsp;{{regexNum(item.price)}}</div>
                </span>
            </div>
        </van-list>
        <div v-if="finished" class="no-more">{{$t('m.Nomore')}}~</div>
        <div style="padding:40px;"></div>
        <footer-bar ref="footer" footerBar="search"></footer-bar>
    </div>
</template>
<script>
    import {searchBuyList} from '../../static/api/mgc_api'
    import Qs from 'qs'
    import FooterBar from '@/components/FooterBar'

    export default {
        //该页面做了缓存 name属性一定要有且与router.js中自动生成的组件name完全一致，否则无法实现缓存
        name: 'comparePhonePhoneList',
        components: {
            FooterBar
        },
        data() {
            return {
                modelBrand: 'Brand model',
                defaultImage: {
                    backgroundImage: "url(" + require("../../static/img/images/default-list.png") + ")",
                    backgroundRepeat: "no-repeat",
                    backgroundSize: "100% 100%",
                },
                condition: '',
                propertyValueId: '',
                oneClass: 'one',
                twoClass: 'two',
                isLoading: false,
                loading: false,
                finished: false,
                tableData: [],
                pageData: {
                    pageNum: 1,
                    pageSize: 10,
                },
                pageInfo: {
                    totalCount: 0,
                    totalPages: 0
                },
            };
        },
        methods: {
            //用来处理图片的
            getWidthAndHeight(e, i) {
                let img = new Image();
                img.src = e.cover
                img.onload = () => {
                    if (img.width > 0 || img.height > 0) {
                        let obj = {
                            wth: null
                        }
                        if (Number(img.width) > Number(img.height)) {
                            obj.wth = 1
                        } else {
                            obj.wth = 0
                        }
                        if (this.tableData[i]) {
                            Object.assign(this.tableData[i], obj)
                        }
                    }
                };

            },
            //用来把title的内容由unicode转成交集
            translateString(str) {
                if (!str) return ''
                return this.$translateLang(str, 'unicodeTozawgyi');
                // if(this.$store.state.store.localLang == 'MM'){
                //     return this.$translateLang(str,'unicodeTozawgyi');
                // }else {
                //     return str;
                // }
            },
            //用来处理价格的
            regexNum(v, len, split) {
                split = split || ',', len = Math.abs((+len) % 20 || 2)
                v = parseFloat((v + '').replace(/[^\d\.-]/g, '')).toFixed(len) + ''
                v = parseFloat(v) + ''
                return v.replace(/\d+/, function (v) {
                        var lit = v.length % 3 == 0
                        var index = lit ? v.length - 3 : -1
                        return v.split('').reverse().join('').replace(/\d{3}/g, function (k, l) {
                            return k + ((l == index && lit) ? '' : split)
                        }).split('').reverse().join('')
                    }
                )
            },
            //获取数据
            getList(pageNum) {
                if (pageNum == 1) {
                    this.pageData.pageNum = 1;
                    this.tableData = [];
                }
                let searchForm = {};
                // 改页面只为搜索手机，所以categoryId写死了
                searchForm.categoryId = 142
                //排序方式为价格从低到高，也是要写死
                searchForm.sort = 'sortPrice asc'
                //condition
                searchForm.condition = this.condition
                //propertyValues 手机model对应的id
                searchForm.propertyValues = this.propertyValueId
                //分页信息配置
                searchForm.pageNum = this.pageData.pageNum
                searchForm.pageSize = this.pageData.pageSize
                let params = Qs.stringify(searchForm, {arrayFormat: 'repeat'})
                searchBuyList(params).then((res) => {
                    if (res.data.errorID == 0) {
                        // wth判断列表图片宽高 start
                        let dataList = res.data.object.list || []
                        for (let i = 0; i < dataList.length; i++) {
                            let obj = {
                                wth: null
                            }
                            Object.assign(dataList[i], obj)
                        }
                        // // 刷新列表 or 加载更多
                        if (this.pageData.pageNum == 1) {
                            window.scrollTo(0, 0)
                            this.tableData = dataList
                            this.finished = false;
                        } else {
                            this.tableData = this.tableData.concat(dataList)
                        }
                        // // 分页信息配置
                        this.pageInfo.totalPages = res.data.object.pages
                        this.pageInfo.totalCount = res.data.object.total
                        this.pageData.pageNum = this.pageData.pageNum + 1
                        if (this.pageData.pageNum > this.pageInfo.totalPages) {
                            this.finished = true
                        }
                        this.loading = false
                        this.isLoading = false;
                    } else {
                        this.$toast(res.data.message)
                        this.finished = true
                        this.loading = false
                        this.isLoading = false;
                    }
                }).catch((e) => {
                    console.log(e)
                    this.$toast('No internet, please try again')
                    this.finished = true
                    this.loading = false
                    this.isLoading = false;
                })
            },
            //去商品详情
            goToDetail(id) {
                this.$router.push({
                    path: '/buydetail',
                    query: {
                        id: id
                    }
                })
            },
        },
        mounted() {
            //condition 0（new） 1(used)
            if (this.$route.query.condition == 1 || this.$route.query.condition == 0) {
                this.condition = this.$route.query.condition
            }
            if (this.$route.query.propertyValueId) {
                this.propertyValueId = this.$route.query.propertyValueId
            }
            if (this.$route.query.modelBrand) {
                this.modelBrand = this.$route.query.modelBrand
            }
        },
        //如果是到详情页，就缓存
        beforeRouteLeave(to, from, next) {
            if (to.path == '/buydetail') {
                from.meta['needFresh'] = false;
            }
            else {
                from.meta['needFresh'] = true;
            }
            next()
        },
        activated() {  //此方法在页面缓存时会被调用，根据路由元信息决定是否重新加载数据。不加载则是上次填写完的数据
            if (this.$route.meta['needFresh']) {// 当前是否需要刷新
                Object.assign(this.$data, this.$options.data())  // 整个页面数据重置
                //重新走一遍mounted
                if (this.$route.query.condition == 1 || this.$route.query.condition == 0) {
                    this.condition = this.$route.query.condition
                }
                if (this.$route.query.propertyValueId) {
                    this.propertyValueId = this.$route.query.propertyValueId
                }
                if (this.$route.query.modelBrand) {
                    this.modelBrand = this.$route.query.modelBrand
                }
            }
        }
    };
</script>
<style>
    .phone-list .van-nav-bar {
        background-color: #FF9900;
    }

    .phone-list .van-nav-bar .van-icon {
        color: #fff;
        margin-right: 15px;
        font-size: 18px;
    }

    .phone-list .van-list__loading {
        width: 100%;
        /*border-top: 1px solid #F2F2F2;*/
    }

    .phone-list .van-nav-bar.filter-title .van-icon {
        color: #BDBDBD;
    }

    .phone-list .property-cell .van-cell__value {
        white-space: nowrap;
        text-overflow: ellipsis;
        color: #db3743;
    }

    .location-tree-select.van-tree-select {
        height: 80% !important;
    }

    .location-tree-select.van-tree-select .van-tree-select__content {
        height: 100% !important;
    }

    .phone-list .van-nav-bar__title {
        max-width: 100%;
    }

    .child-category-box .van-button--small {
        padding: 0 25px;
        margin-left: 6px;
    }

    .phone-list .text-active {
        color: #f90;
    }

    .phone-list .modal .van-field__body {
        height: 100%;
    }

    .phone-list .van-collapse-item.active .van-cell__value, .phone-list .category-sec .van-collapse-item.active .van-cell__title {
        color: #f90;
    }

    .phone-list .van-collapse-item.active .van-button.active {
        border-color: #f90;
        background: #f90;
        color: #fff;
    }

    .phone-list .price-box .van-button--small {
        height: 29px;
        margin: 0 auto;
        border: 1px solid #f2f2f2;
        min-width: 50px;
    }

    .phone-list .modal .van-tree-select__nitem--active, .phone-list .modal .van-tree-select__nitem:active {
        background: #f90;
        color: #fff;
    }

    .phone-list .modal .van-tree-select__item--active, .phone-list .modal .van-tree-select__item:active {
        color: #f90;
    }
</style>
<style scoped>
    .main-explore {
        position: relative;
        background: #fff;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        text-align: center;
        flex-wrap: wrap;
        padding: 0;
        margin: 0;
        /*margin-bottom: 14px;*/
        padding-right: 4%;
    }

    .main-explore.phone-list-explore .explore-item {
        display: block;
        padding: 14px 0 0;
        margin-left: 4%;
        width: 46%;
        text-decoration: none;
        color: #000;
    }

    .main-explore .explore-item.one:nth-last-child(2), .main-explore .explore-item.two:nth-last-child(2) {
        border-bottom: none;
        margin-bottom: 14px;
    }

    .main-explore .explore-item.two:nth-last-child(3) {
        border-bottom: none;
        margin-bottom: 14px;
    }

    .main-explore .explore-item:nth-child(2n) {
        margin-right: 0;
        border-right: 0;
    }

    .main-explore .explore-item .explore-item-icon {
        width: 100%;
        align-items: center;
        display: flex;
        background: #f0f0f0;
        position: relative;
        z-index: 0;
        height: 0;
        padding: 0 0 100%;
        overflow: hidden;
        border-radius: 6px;
    }

    .main-explore .explore-item .explore-item-icon::before {
        content: "Tolymoly";
        position: absolute;
        top: 50%;
        bottom: 0;
        right: 0;
        left: 0;
        text-align: center;
        background: #f0f0f0;
        font-size: 1.5rem;
        font-weight: 700;
        color: #c0bfbf;
        z-index: -1;
        margin-top: -12px;
    }

    .main-explore .explore-item > * {
        display: block;
        margin: 0 auto;
    }

    .main-explore .explore-item-icon img {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1;
        width: 100%;
    }

    .main-explore .explore-item-icon img.width-max {
        width: auto;
        left: 50%;
        right: auto;
        height: 100%;
        transform: translate(-50%);
    }

    .main-explore .explore-item-icon img.height-max {
        top: 50%;
        transform: translateY(-50%);
    }

    .main-explore .explore-item .explore-item-label {
        font-size: 14px;
        line-height: 160%;
        margin-top: 4px;
        text-align: left;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        color: #000;
    }

    .main-explore .explore-item .explore-item-label.price {
        font-size: 14px;
        color: #4c4c4c;
    }

    .main-explore .explore-item .explore-item-label.dates {
        color: #A1A1A1;
    }

    .to-sell {
        position: fixed;
        bottom: 10px;
        right: 10px;
        z-index: 1000;
        display: block;
        width: 60px;
        height: 60px;
        /*line-height: 60px;*/
        border-radius: 30px;
        background-color: #f90;
        text-align: center;
        font-size: 24px;
        color: #fff;
    }

    .tabbar-box {
        padding: 5px 0;
        border-bottom: 1px solid #D7D7D7;
        width: 100%;
        background: #fff;
    }

    .tabbar-box .tabbar {
        position: relative;
        padding: 2px 20px 2px 10px;
        line-height: 1.5;
        border-right: 1px solid #F2F2F2;
        text-align: center;
        font-size: 14px;
        height: 25px;
    }

    .san-box {
        position: absolute;
        right: 9px;
        top: 10px;
        width: 0;
        height: 0;
        border-top: 5px solid #666666;
        border-right: 5px solid transparent;
        border-left: 5px solid transparent;
        display: inline-block;
    }

    .no-more {
        border-top: 1px solid #F2F2F2;
        height: 50px;
        line-height: 50px;
        color: #909399;
        text-align: center;
    }

    .modal {
        width: 100%;
        height: 100%;
    }

    .submit-btn {
        width: 90%;
        border-top: 1px solid #F2F2F2;
        position: fixed;
        left: 0;
        right: 0;
        margin: 0 auto;
        bottom: 10px;
    }

    .submit-btn .btn {
        border: 1px solid #FF9A03;
        color: #FF9A03;
    }

    .filter-right-title {
        float: right;
        color: rgb(219, 55, 67);
        padding-right: 10px;
    }

    .filter-child-list {
        width: 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        padding: 10px 15px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        line-height: 24px;
        position: relative;
        background-color: #fff;
        color: #333;
        font-size: 14px;
        overflow: hidden;
    }

    .activeClass {
        color: #db3743;
    }

    .border-t {
        border-top: 1px solid #f2f2f2;
    }

    .price-box {
        display: flex;
        padding: 7.5px 15px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        font-size: 14px;
        overflow: hidden;
        color: #333;
    }

    .price-box .price-input {
        width: 26%;
        border: 1px solid #F2F2F2;
        height: 24px;
        line-height: 1;
        font-size: 12px;
        color: #333;
        text-indent: 10px;
    }

    .price-box .price-input.text-danger {
        border: 1px solid #fa5555;
    }

    .phone-list .filter-title {
        background-color: #F2F2F2;
        color: #333;
    }

    .title-text {
        width: 90%;
        display: inline-block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .font-color {
        color: rgb(255, 153, 0);
    }

    .child-category-box {
        width: 100%;
        background: #ECEDF1;
    }

    .child-category-box.third {
        background: #fff;
    }

    .child-box {
        overflow: hidden;
        overflow-x: auto;
        white-space: nowrap;
        padding: 5px 0;
    }

    .child-category-box .cate-btn {
        padding: 0 25px;
        margin-left: 6px;
        height: 30px;
        min-width: 60px;
        font-size: 12px;
        line-height: 28px;
        position: relative;
        display: inline-block;
        border-radius: 3px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        text-align: center;
        -webkit-appearance: none;
        color: #333;
        background-color: #fff;
        border: 1px solid rgb(102, 102, 102);
    }

    .child-category-box .cate-btn.active {
        background-color: #f90;
        border: 1px solid #f90;
        color: #fff;
    }

    .child-category-box .cate-btn:last-child {
        margin-right: 6px;
    }

    .child-category-box.third .cate-btn {
        color: rgb(102, 102, 102);
        background-color: #ECEDF1;
        border: 1px solid #ECEDF1;
    }

    .child-category-box.third .cate-btn.active {
        border: 1px solid rgb(102, 102, 102);
        background: #CDCED2;
    }

    .list-title-bar {
        width: 100%;
    }

    @media (max-width: 375px) and (min-width: 321px) {
        .swiper-banner {
            height: 192px;
        }

        .main-explore .explore-item .explore-item-icon {
            /*height: 155px;*/
        }

        .main-explore .explore-item .explore-item-icon::before {
            /*line-height: 155px;*/
        }
    }

    @media (max-width: 1080px) and (min-width: 376px) {
        .swiper-banner {
            height: 214px;
        }

        .main-explore .explore-item .explore-item-icon {
            /*height: 173px;*/
        }

        .main-explore .explore-item .explore-item-icon::before {
            /*line-height: 173px;*/
        }
    }
</style>
